import { Select } from 'antd'
import { useEffect, useState } from 'react'
import { getChannelAPI } from 'api/channels'

export default function Channel({ value, onChange }) {
  const [channels, setChannels] = useState([])

  const getChannelList = async () => {
    const res = await getChannelAPI()
    console.log(res.data.channels)
    setChannels(res.data.channels)
  }

  useEffect(() => {
    getChannelList()
  }, [])

  return (
    <Select
      value={value}
      onChange={onChange}
      style={{ width: 200 }}
      placeholder="请选择频道"
      allowClear
    >
      {channels.map((item) => (
        <Select.Option key={item.id} value={item.id}>
          {item.name}
        </Select.Option>
      ))}
    </Select>
  )
}
